<html>
    <head>
        <title>绑定内联样式---对象语法</title>
    </head>
    <body>
        <script>
             // ★一、 对象语法
                                  
                                    /*
                                        v-bind:style 的对象语法十分直观----看着非常像css  ，
                                        但其实是一个JS对象。CSS 的 property 名可以用驼峰式(camelCase) 或 短横线分割(kebab-case ,记得用单引号括起来) 来命名。 


                                            eg:  <div v-bind:style="{color: activeColor,fontSize:fontSize+'px'}"></div>
                                    */
                                    data:{
                                                    activeColor:'red',
                                                    fontSize:30
                                                  }

                                     /*
                                        直接绑定到一个"样式对象"通常更好，这会让模板更清晰：
                                            
                                            eg:  <div v-bind:style="styleObject"></div>      
                                     */   
                                                  data:{
                                                    styleObject:{
                                                        color:'red',
                                                        fontSize:'13px'
                                                    }
                                                  }


                                        // 同样的，对象语法常常结合"返回对象的计算属性"使用。
        </script>
    </body>
</html>